<template>
  <a-spin :spinning="loading">
    <div class="data-statistics">
      <a-row :gutter="16">
        <a-col v-for="(item, index) in column" :key="index" :span="8">
          <div class="statistic-card">
            <div class="count">
              {{ passData[item.field] }}
            </div>
            <div class="title">
              {{ item.label }}
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Base.GeneraDataType;
    column: Array<Base.GeneraDataType>;
    init: () => Promise<any>;
  }>(),
  {}
);
const { column, visible, init, passData } = toRefs(props);
const { loading } = InitHook();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      loading.value = true;
      init.value().finally(() => (loading.value = false));
    }
  }
);
loading.value = true;
init.value().finally(() => (loading.value = false));
</script>
<style lang="stylus" scoped>
.data-statistics{
    .statistic-card {
        padding: 24px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-shadow: 1px 1px 20px inset #ccc;
        margin-bottom: 16px;
        .count {
            font-size: 32px;
            font-weight: 600;
            color: #1e7eff;
            padding-bottom: 12px;
        }
        .title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
    }
}
</style>
